<template>
	<view class="content">
		<!-- #ifdef H5 -->
		<div id="dplayer" style="height: 450rpx;position: fixed;top:0;z-index: 5;"></div>

		<view class="group-profile" style="position: fixed;top: 450rpx;z-index: 5;">
			<TUI-group-profile v-if="isShow" id="groip-profile" :conversation="conversation" />
		</view>

		<view class="message-list" @tap="triggerClose" style="margin-bottom: 150rpx;height:100%;z-index: -1;">
			<TUI-message-list id="message-list" ref="messageList" :conversation="conversation" />
		</view>

		<view v-if="videoPlay" class="container-box" @tap.stop="stopVideoHander">
			<video v-if="videoPlay" class="video-message" :src="videoMessage.payload.videoUrl"
				:poster="videoMessage.payload.thumbUrl" object-fit="cover" error="videoError" autoplay="true"
				direction="0" />
		</view>

		<view v-if="showChat" class="message-input" style="position: fixed;bottom: 0;">
			<TUI-message-input id="message-input" ref="messageInput" :conversation="conversation"
				@sendMessage="sendMessage" />
		</view>
		<!-- #endif -->

		<!-- #ifdef APP-PLUS -->
		<web-view src="http://106.15.238.147:8084/"></web-view>
		<!-- #endif -->

	</view>
</template>

<script>
	import TIM from 'tim-wx-sdk'
	import Hls from 'hls.js'

	import TUIMessageList from '@/components/tui-chat/message-list/index';
	import TUIMessageInput from '@/components/tui-chat/message-input/index';
	import TUIGroupProfile from '@/components/tui-group/group-profile/index';
	
	import {
		genTestUserSig
	} from '@/debug/GenerateTestUserSig.js';


	// #ifdef H5
	import Dplayer from 'dplayer'
	// #endif
	export default {
		components: {
			TUIMessageList,
			TUIMessageInput,
			TUIGroupProfile
		},
		props: {},
		data() {
			return {
				dp: {},
				conversationName: '',
				conversation: {},
				messageList: [],
				isShow: false,
				showChat: true,
				conversationID: '',
				videoPlay: false,
				videoMessage: {},
				config: {
					sdkAppID: '',
					userID: '',
					userSig: '',
					type: 1,
					tim: null
				}
			}
		},
		mounted() {
			let url = window.location.href
			let p = url.split('?')[1]
			let params = new URLSearchParams(p)
			let userId = params.get("userId")
			let liveId = params.get("liveId")
			if(liveId && userId){
				liveId = liveId.split('#')[0]
				console.log("参数", liveId, userId)
			}
			


			// #ifdef H5
			this.dp = new Dplayer({
				//播放器的一些参数
				container: document.getElementById('dplayer'),
				autoplay: false, //是否自动播放
				theme: '#FADFA3', //主题色
				loop: true, //视频是否循环播放
				lang: 'zh-cn',
				screenshot: false, //是否开启截图
				hotkey: true, //是否开启热键
				preload: 'auto', //视频是否预加载
				volume: 0.7, //默认音量
				mutex: true, //阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
				video: {
					url: 'https://laliu.fyzzz.top/live/'+liveId+'.m3u8 ', //视频地址
					type: 'customHls',
					customType: {
						customHls: function(video, player) {
							const hls = new Hls() //实例化Hls  用于解析m3u8
							hls.loadSource(video.src)
							hls.attachMedia(video)
						}
					},
				},
			});
			// #endif

			let that = this
			// 初始化完成后登录并加入群组
			const userID = userId;
			const userSig = genTestUserSig(userID).userSig;

			uni.$TUIKit.login({
				userID: userID,
				userSig: userSig
			}).then((imResponse) => {
				console.log(imResponse.data); // 登录成功
				uni.$TUIKit.joinGroup({
					groupID: liveId,
					type: TIM.TYPES.GRP_AVCHATROOM
				}).then((imResponse) => {
					console.log("成功加入群组", imResponse.data);
					const conversationID = "GROUP" + liveId;
					that.conversationID = conversationID
					uni.$TUIKit.setMessageRead({
						conversationID
					}).then(() => {
						console.log('TUI-chat | setMessageRead  | ok');
					});
					uni.$TUIKit.getConversationProfile(conversationID).then(res => {
						console.log("获取会话", res)
						const conversation = res.data.conversation;
						that.conversation = conversation;
						that.conversationName = that.getConversationName(conversation)
						that.isShow = conversation.type === 'GROUP'
					});
				}).catch(function(imError) {
					console.warn('joinGroup error:', imError); // 申请加群失败的相关信息
				});
			}).catch(function(imError) {
				console.warn('login error:', imError); // 登录失败的相关信息
			});
		},
		methods: {
			stopVideoHander() {
				this.videoPlay = false;
			},
			getConversationName(conversation) {
				if (conversation.type === '@TIM#SYSTEM') {
					this.showChat = false
					return '系统通知';
				}

				if (conversation.type === 'C2C') {
					return conversation.remark || conversation.userProfile.nick || conversation.userProfile.userID;
				}

				if (conversation.type === 'GROUP') {
					return conversation.groupProfile.name || conversation.groupProfile.groupID;
				}
			},
			sendMessage(event) {
				// 将自己发送的消息写进消息列表里面
				this.$refs.messageList.updateMessageList(event.detail.message);
			},
			triggerClose() {
				if (this.showChat) {
					this.$refs.messageInput.handleClose();
				}
			},
			goBack() {
				const pages = getCurrentPages(); // 当前页面栈

				if (
					pages[pages.length - 2].route === 'pages/TUI-Conversation/create-conversation/create' ||
					pages[pages.length - 2].route === 'pages/TUI-Group/create-group/create' ||
					pages[pages.length - 2].route === 'pages/TUI-Group/join-group/join'
				) {
					uni.navigateBack({
						delta: 2
					});
				} else {
					uni.navigateBack({
						delta: 1
					});
				}

				uni.$TUIKit
					.setMessageRead({
						conversationID: this.conversationID
					})
					.then(() => {});
			}
		}
	}
</script>

<style scoped>

</style>
